<template>
	<view class="my-page">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="user-header">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
				<view class="user-detail">
					<text class="nickname">{{ userInfo.nickname }} <text class="vip-tag">VIP</text></text>
					<text class="user-id">ID: {{ userInfo.id }}</text>
				</view>
			</view>
		</view>

		<!-- 订单状态区域 -->
		<view class="order-section">
			<view class="order-header">
				<text class="title">我的订单</text>
				<view class="check-all" @click="navigateToOrder('all')">
					查看全部 <text class="arrow">></text>
				</view>
			</view>
			<view class="order-status">
				<view class="status-item" v-for="(item, index) in orderStatus" :key="index"
					@click="navigateToOrder(item.type)">
					<view class="icon-wrapper">
						<image class="status-icon" :src="item.icon" mode="aspectFit" />
						<text v-if="item.count" class="badge">{{ item.count }}</text>
					</view>
					<text class="status-text">{{ item.text }}</text>
				</view>
			</view>
		</view>

		<!-- 邀请好友按钮 -->
		<view class="invite-friend" @click="handleMenuClick('invite')">
			<text>邀请好友</text>
			<text class="arrow">去邀请 ></text>
		</view>

		<!-- 我的资产 -->
		<view class="my-assets">
			<view class="section-title">我的资产</view>
			<view class="assets-list">
				<view class="asset-item" v-for="(item, index) in assetsList" :key="index"
					@click="navigateToAsset(item.type)">
					<view class="asset-left">
						<image class="asset-icon" :src="item.icon" mode="aspectFit" />
						<text class="asset-text">{{ item.text }}</text>
					</view>
					<view class="arrow">></view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="function-menu">
			<view class="menu-grid">
				<view class="menu-item" v-for="(item, index) in menuList" :key="index"
					@click="handleMenuClick(item.type)">
					<image class="menu-icon" :src="item.icon" mode="aspectFit" />
					<text class="menu-text">{{ item.text }}</text>
				</view>
			</view>
		</view>

		<view class="footer-text">美好生活 与你相伴</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: '/static/img/首页.png',
				nickname: '的于此次',
				id: '164163463'
			},
			orderStatus: [
				{ icon: '/static/img/首页.png', text: '待付款', type: 'waitPay', count: 2 },
				{ icon: '/static/img/首页.png', text: '待发货', type: 'waitDeliver', count: 0 },
				{ icon: '/static/img/首页.png', text: '待收货', type: 'waitReceive', count: 1 },
				{ icon: '/static/img/首页.png', text: '待评价', type: 'evaluate', count: 0 },
				{ icon: '/static/img/首页.png', text: '退款售后', type: 'afterSale', count: 0 }
			],
			assetsList: [
				{ icon: '/static/img/首页.png', text: '我的积分', type: 'points' },
				{ icon: '/static/img/首页.png', text: '我的金币', type: 'coins' },
				{ icon: '/static/img/首页.png', text: '我的团队', type: 'team' }
			],
			menuList: [
				{ icon: '/static/img/首页.png', text: '购物车', type: 'cart' },
				{ icon: '/static/img/首页.png', text: '订单管理', type: 'order' },
				{ icon: '/static/img/首页.png', text: '地址管理', type: 'address' },
				{ icon: '/static/img/首页.png', text: '安全管理', type: 'security' },
				{ icon: '/static/img/首页.png', text: '联系客服', type: 'service' },
				{ icon: '/static/img/首页.png', text: '关注公众号', type: 'follow' },
				{ icon: '/static/img/首页.png', text: '退出登录', type: 'logout' },
				{ icon: '/static/img/首页.png', text: '邀请好友', type: 'invite' }
			]
		}
	},
	methods: {
		navigateToOrder(type) {
			uni.navigateTo({
				url: `/pages/order/list?type=${type}`
			})
		},
		navigateToAsset(type) {
			uni.navigateTo({
				url: `/pages/asset/${type}`
			})
		},
		handleMenuClick(type) {
			switch (type) {
				case 'cart':
					uni.switchTab({ url: '/pages/cart/index' })
					break
				case 'logout':
					this.handleLogout()
					break
				default:
					uni.navigateTo({
						url: `/pages/${type}/index`
					})
			}
		},
		handleLogout() {
			// 处理退出登录逻辑
			uni.showModal({
				title: '提示',
				content: '确认退出登录？',
				success: (res) => {
					if (res.confirm) {
						// 执行退出登录
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.my-page {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.user-info {
	background-color: #ff6b35;
	padding: 88rpx 30rpx 120rpx;

	.user-header {
		display: flex;
		align-items: center;

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(255, 255, 255, 0.3);
		}

		.user-detail {
			margin-left: 20rpx;

			.nickname {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
				display: flex;
				align-items: center;

				.vip-tag {
					margin-left: 12rpx;
					font-size: 20rpx;
					color: #ff6b35;
					background: #fff;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					font-weight: normal;
				}
			}

			.user-id {
				font-size: 22rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-top: 8rpx;
				display: block;
			}
		}
	}
}

.order-section {
	border: 1px solid #f37021;
	margin: -80rpx 20rpx 0;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333;
		}

		.check-all {
			font-size: 24rpx;
			color: #999;

			.arrow {
				margin-left: 4rpx;
			}
		}
	}

	.order-status {
		display: flex;
		padding: 30rpx 0;

		.status-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon-wrapper {
				position: relative;
				margin-bottom: 12rpx;

				.status-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.badge {
					position: absolute;
					top: -8rpx;
					right: -12rpx;
					background: #ff6b35;
					color: #fff;
					font-size: 20rpx;
					min-width: 32rpx;
					height: 32rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 6rpx;
				}
			}

			.status-text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.invite-friend {
	border: 1px solid #f37021;
	margin: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

	text {
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		color: #999;
		font-size: 24rpx;
	}
}

.my-assets,
.function-menu {
	border: 1px solid #f37021;
	margin: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.my-assets {
	.section-title {
		padding: 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.assets-list {
		.asset-item {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.asset-left {
				display: flex;
				align-items: center;

				.asset-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.asset-text {
					font-size: 28rpx;
					color: #333;
				}
			}

			.arrow {
				color: #999;
				font-size: 24rpx;
			}
		}
	}
}

.function-menu {
	padding: 20rpx;

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;

			.menu-icon {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 12rpx;
			}

			.menu-text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.footer-text {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 40rpx 0;
}
</style>